<template>
    AI文字<input type="text" v-model="cityCode"/>
     <button @click="getCityWeather">查询AI作图</button>
     <ul v-if="cityWeather">
        AI图片生成:<img :src="cityWeather" />
     </ul>
</template>
<script setup>
// js解析模块错误，命名导入没导好
import {ref} from 'vue'
import axios from 'axios'
const cityCode = ref(null); //声明城市ID数据源
const cityWeather = ref(null); //声明城市天气状况数据源

function getCityWeather(){ //发送请求获取城市天气的状况
    axios({
        method:"POST",
        url:"/apispace/aigc/txt2img",
        headers:{
            "X-APISpace-Token":"2bhhcvtswn7icfkaopp0rfafgpjqx7tb",
            "Authorization-Type":"apikey",
            "Content-Type":"	application/json",
        },

        params: { "task": "cityCode.value", }, // 与请求一起发送的 URL 参数

        //  // 作为请求体被发送的数据，仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
        data: { 
            "task":"txt2img.sd",
            "params":{
                "model":"anime",
                "text":"{{{ masterpiece }}}, exquisite facial features, masterpiece, perfect facial features, exquisite details, eyes, hair atmosphere, high resolution, 4K image quality, best light, delicate skin, detailed light, masterpiece, best quality,higher quality,high details, human head and deer body, sagittata, beautiful female face, long eyelashes, long silver hair, several braids, crystal bow and arrow, crystal translucent deer horn, corolla, silvery white fur wraps the whole body, no meat, crystal forest, magic, circle, masterpiece, masterpiece, ultra-high definition, countless golden light spots, dream charm, human personification, colorful light and shadow, top light, realistic effect, grade safety, unity, (ultra-fine CG:1.2),(8K:1.2), indoor, {{{{{wind blowing}}}}}}}}}} light, {{{}}}}}} {{{{{{{{{{{{{{{{{{{{{{{, 4k",
            }
         }, // 与请求一起发送的 URL 参数
    })
    .then(response => {
        const responseData = response.data
        console.log(response); //响应的结构
        if(responseData.code === 0){ //判断是否有该城市
            cityWeather.value = responseData
        }else{
            alert(responseData.msg)
        }
    })
    //把错误异常抛出！！
    .catch(error => {
        alert(responseData.msg)
        alert('服务器异常')
    })
}

</script>